<template>
  <div class="charging_edit">
    <el-card class="edit_card">
      <div class="card_left">
        <div class="card_left_item" style="height: 30%" @click="back">
          <div class="icon">
            <i class="iconfont icon-chongdianzhuang"></i>
          </div>
          <div class="title">收费类型</div>
          <div
            class="detail"
            style="
              box-sizing: border-box;
              padding: 5px 10px;
              height: 30%;
              vertical-align: center;
            "
          >
            <span style="font-size: 1rem">充电车位：</span>
            <span v-if="edit.charge_type">
              <i class="el-icon-circle-check" style="color: #67c23a"></i>
            </span>
            <span v-else>
              <i class="el-icon-circle-close" style="color: #f56c6c"></i>
            </span>
          </div>
        </div>
        <div class="card_left_item" style="height: 65%" @click="next">
          <div class="icon">
            <i class="iconfont icon-zhangdan"></i>
          </div>
          <div class="title">收费规则</div>
          <div class="detail" style="height: 65%" ref="detail_item_fa">
            <div v-if="edit.charge_type">
              <div class="detail_item">
                <span class="detail_item_title">计费名称:</span>
                <span class="detail_item_detail">{{ edit.charge_name }}</span>
              </div>
              <div class="detail_item">
                <span class="detail_item_title">免费时长:</span>
                <span class="detail_item_detail">{{
                  edit.charge_free_time
                }}</span>
              </div>
              <div class="detail_item">
                <span class="detail_item_title">最低消费:</span>
                <span class="detail_item_detail">{{ edit.charge_min }}</span>
              </div>
              <div class="detail_item">
                <span class="detail_item_title">最大收费额:</span>
                <span class="detail_item_detail">{{ edit.charge_max }}</span>
              </div>
              <div class="detail_item">
                <span class="detail_item_title">计费单元: </span>
                <span class="detail_item_detail">{{ edit.charge_unitt }}</span>
              </div>
              <div class="detail_item">
                <span class="detail_item_title">充电最低消费:</span>
                <span class="detail_item_detail">{{
                  edit.charge_charging_min
                }}</span>
              </div>
              <div class="detail_item">
                <span class="detail_item_title">充电计费单元:</span>
                <span class="detail_item_detail">{{
                  edit.charge_charging_unitt
                }}</span>
              </div>
            </div>
            <div v-else>
              <div class="detail_item">
                <span class="detail_item_title">计费名称:</span>
                <span class="detail_item_detail">{{ edit.charge_name }}</span>
              </div>
              <div class="detail_item">
                <span class="detail_item_title">免费时长:</span>
                <span class="detail_item_detail">{{
                  edit.charge_free_time
                }}</span>
              </div>
              <div class="detail_item">
                <span class="detail_item_title">最低消费:</span>
                <span class="detail_item_detail">{{ edit.charge_min }}</span>
              </div>
              <div class="detail_item">
                <span class="detail_item_title">最大收费额:</span>
                <span class="detail_item_detail">{{ edit.charge_max }}</span>
              </div>
              <div class="detail_item">
                <span class="detail_item_title">计费单元: </span>
                <span class="detail_item_detail">{{ edit.charge_unitt }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card_right">
        <div class="see-right">
          <div class="box-right" ref="boxRight">
            <el-card class="box-card_right" shadow="never">
              <div class="left_side">
                <div class="box-card_right_title">收费类型</div>
                <div class="box-card_right_title_detail">
                  请选择你的收费类型
                </div>
                <div class="big-radius">
                  <div class="box-card_right_pic">
                    <div style="margin-top: 25px">充电车位</div>
                    <el-switch
                      v-model="edit.charge_type"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      style="margin-top: 20px"
                    >
                    </el-switch>
                  </div>
                  <div class="box-card_radius" ref="boxCardRadius">
                    <div class="box-card_radius_top">
                      <img src="../assets/image/plate.png" />
                    </div>
                    <div class="box-card_radius_bottom">
                      <img src="../assets/image/chargePlate.png" />
                    </div>
                  </div>
                </div>
                <div style="position: absolute; bottom: 0; left: 5%">
                  <el-button @click="backEdit"
                    ><i class="el-icon-arrow-left el-icon--right"></i
                    >返回</el-button
                  >
                </div>
                <div style="position: absolute; bottom: 0; right: 5%">
                  <el-button type="primary" @click="next"
                    >下一步<i class="el-icon-arrow-right el-icon--right"></i
                  ></el-button>
                </div>
              </div>
              <div class="right_side">
                <div class="box-card_right_title">收费规则</div>
                <div class="box-card_right_title_detail">
                  请编辑你的收费规则
                </div>
                <div style="margin-top: 20px" v-if="edit.charge_type">
                  <el-form
                    ref="edit"
                    :model="edit"
                    label-width="140px"
                    style="margin: 0 auto; width: 80%"
                  >
                    <el-form-item label="计费名称" prop="charge_name">
                      <el-input v-model="edit.charge_name"></el-input>
                    </el-form-item>
                    <el-form-item
                      prop="charge_free_time"
                      label="免费时长"
                      :rules="[
                        { required: true, message: '免费时长不能为空' },
                        { type: 'number', message: '免费时长必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="edit.charge_free_time"
                        style="width: 65%"
                        autocomplete="off"
                      ></el-input>
                      <span style="margin: 0 20px">分钟</span>
                    </el-form-item>
                    <el-form-item
                      prop="charge_min"
                      label="最低消费"
                      :rules="[
                        { required: true, message: '最低消费不能为空' },
                        { type: 'number', message: '最低消费必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="edit.charge_min"
                        style="width: 65%"
                        autocomplete="off"
                      ></el-input>
                      <span style="margin: 0 20px">元</span>
                    </el-form-item>
                    <el-form-item
                      prop="charge_max"
                      label="最大收费额"
                      :rules="[
                        { required: true, message: '最大收费额不能为空' },
                        { type: 'number', message: '最大收费额必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="edit.charge_max"
                        style="width: 65%"
                      ></el-input>
                      <span style="margin: 0 20px">元</span>
                    </el-form-item>
                    <el-form-item
                      prop="charge_unitt"
                      label="计费单元"
                      :rules="[
                        { required: true, message: '最大收费额不能为空' },
                        { type: 'number', message: '最大收费额必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="edit.charge_unitt"
                        style="width: 65%"
                      ></el-input>
                      <span style="margin: 0 20px">元/小时</span>
                    </el-form-item>
                    <el-form-item
                      prop="charge_charging_min"
                      label="充电最低消费"
                      :rules="[
                        { required: true, message: '充电最低消费不能为空' },
                        { type: 'number', message: '充电最低消费必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="edit.charge_charging_min"
                        style="width: 65%"
                      ></el-input>
                      <span style="margin: 0 20px">元/10分钟</span>
                    </el-form-item>
                    <el-form-item
                      prop="charge_charging_unitt"
                      label="充电计费单元"
                      :rules="[
                        { required: true, message: '充电计费单元不能为空' },
                        { type: 'number', message: '充电计费单元必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="edit.charge_charging_unitt"
                        style="width: 65%"
                      ></el-input>
                      <span style="margin: 0 20px">元/10分钟</span>
                    </el-form-item>
                    <el-form-item prop="remarks" label="备注">
                      <el-input
                        type="textarea"
                        v-model="edit.remarks"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div style="position: absolute; bottom: -5%; left: 10%">
                    <el-button
                      type="primary"
                      icon="el-icon-arrow-left"
                      @click="back"
                      >上一步</el-button
                    >
                  </div>
                  <div style="position: absolute; bottom: -5%; right: 5%">
                    <el-button type="primary" @click="submit('edit')"
                      >提交<i class="el-icon-upload el-icon--right"></i
                    ></el-button>
                  </div>
                </div>
                <div style="margin-top: 30px" v-else>
                  <el-form
                    ref="edit"
                    :model="edit"
                    label-width="100px"
                    style="margin: 0 auto; width: 60%"
                  >
                    <el-form-item label="计费名称">
                      <el-input v-model="edit.charge_name"></el-input>
                    </el-form-item>
                    <el-form-item
                      prop="charge_free_time"
                      label="免费时长"
                      :rules="[
                        { required: true, message: '免费时长不能为空' },
                        { type: 'number', message: '免费时长必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="edit.charge_free_time"
                        style="width: 65%"
                        autocomplete="off"
                      ></el-input>
                      <span style="margin: 0 20px">分钟</span>
                    </el-form-item>
                    <el-form-item
                      prop="charge_min"
                      label="最低消费"
                      :rules="[
                        { required: true, message: '最低消费不能为空' },
                        { type: 'number', message: '最低消费必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="edit.charge_min"
                        style="width: 65%"
                        autocomplete="off"
                      ></el-input>
                      <span style="margin: 0 20px">元</span>
                    </el-form-item>
                    <el-form-item
                      prop="charge_max"
                      label="最大收费额"
                      :rules="[
                        { required: true, message: '最大收费额不能为空' },
                        { type: 'number', message: '最大收费额必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="edit.charge_max"
                        style="width: 65%"
                      ></el-input>
                      <span style="margin: 0 20px">元</span>
                    </el-form-item>
                    <el-form-item
                      prop="charge_unitt"
                      label="计费单元"
                      :rules="[
                        { required: true, message: '最大收费额不能为空' },
                        { type: 'number', message: '最大收费额必须为数字值' },
                      ]"
                    >
                      <el-input
                        v-model.number="edit.charge_unitt"
                        style="width: 65%"
                      ></el-input>
                      <span style="margin: 0 20px">元/小时</span>
                    </el-form-item>
                    <div style="position: absolute; bottom: 0; left: 10%">
                      <el-button
                        type="primary"
                        icon="el-icon-arrow-left"
                        @click="back"
                        >上一步</el-button
                      >
                    </div>
                    <div style="position: absolute; bottom: 0; right: 5%">
                      <el-button type="primary" @click="submit('edit')"
                        >提交<i class="el-icon-upload el-icon--right"></i
                      ></el-button>
                    </div>
                  </el-form>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Charge_Edit",
  props: ["chargeData"],
  data() {
    return {
      edit: {
        charge_id: 0,
        charge_type: false,
        charge_name: "普通节日",
        charge_free_time: 30,
        charge_min: 20,
        charge_max: 280,
        charge_unitt: 20,
        charge_charging_min: 10,
        charge_charging_unitt: 80,
        remarks: "测试",
      },
    };
  },
  mounted() {
    const id = this.$route.params.id;
    let result = this.chargeData.find((item) => {
      if (item.charge_id == id) {
        return item;
      }
    });
    this.edit = result;
  },
  methods: {
    backEdit() {
      this.$router.go(-1);
    },
    next() {
      const boxRight = this.$refs.boxRight;
      boxRight.classList.add("next");
    },
    back() {
      const boxRight = this.$refs.boxRight;
      boxRight.classList.remove("next");
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post("/charge/changeInfo", this.edit, {
              "Content-Type": "application/json",
            })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.backEdit();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("修改计费信息失败");
            });
        } else {
          this.$message({
            message: "请完整填写修改信息",
            type: "warning",
          });
          return false;
        }
      });
    },
  },
  watch: {
    "edit.charge_type": {
      handler: function (newVal, oldVal) {
        const boxCardRadius = this.$refs.boxCardRadius;
        const detail_item = this.$refs.detail_item_fa.children[0].children;
        const len = detail_item.length;
        if (newVal === true) {
          boxCardRadius.classList.add("choose");
          for (let i = 0; i < len; i++) {
            detail_item[i].classList.add("charge");
          }
        } else if (newVal === false) {
          boxCardRadius.classList.remove("choose");
          for (let i = 0; i < len; i++) {
            detail_item[i].classList.remove("charge");
          }
        }
      },
    },
  },
};
</script>

<style scoped>
.charging_edit {
  box-sizing: border-box;
  width: 100%;
  height: 65vh;
  padding: 0 30px;
}

.edit_card {
  position: relative;
  width: 100%;
  height: 75vh;
}
.card_left {
  display: flex;
  flex-direction: column;
  position: relative;
  float: left;
  width: 40%;
  height: 70vh;
}
.card_left:after {
  content: "";
  position: absolute;
  left: auto;
  top: auto;
  bottom: 15%;
  right: 0;
  height: 70%;
  width: 5px;
  background-color: #a9abb1;
}
.card_left_item {
  box-sizing: border-box;
  margin-top: 10px;
  width: 90%;
  padding: 10px 20px;
}
.icon {
  width: 100%;
  height: 5vh;
}
.icon i {
  font-size: 3rem;
  color: #6294eb;
}
.card_left_item:hover {
  cursor: pointer;
  color: #225cc2;
}
.card_left_item:hover i {
  color: #225cc2;
}
.card_left_item:hover span {
  color: #225cc2;
}
.card_left_item:hover /deep/.el-form-item__label {
  color: #225cc2;
}
.title {
  box-sizing: border-box;
  margin-top: 10px;
  width: 100%;
  height: 5vh;
  padding: 5px 10px;
  font-size: 1.2rem;
  font-weight: 600;
}
.detail {
  margin: 5px auto;
  width: 50%;
  font-size: 1.8rem;
  color: #909399;
}
.detail_item {
  width: 100%;
  height: 5vh;
  margin-top: 10px;
  font-size: 1rem;
}
.detail_item.charge {
  height: 3vh;
}
.detail_item_title {
  float: left;
  width: 55%;
  height: 100%;
}
.detail_item_detail {
  padding: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail /deep/ .el-form .el-form--label-left {
  width: 50%;
}
.detail /deep/ .el-form-item__label {
  width: 20vw;
  height: 6vh;
  color: #909399;
}
.detail /deep/ .el-form-item__label.charge {
  height: 4vh;
}
.detail /deep/ .el-form-item {
  margin-bottom: 0px;
  height: 6vh;
}
.detail /deep/ .el-form-item.charge {
  margin-bottom: 0px;
  height: 4vh;
}
.detail /deep/ .el-form-item__content {
  text-align: left;
  width: 80%;
}

.card_right {
  float: right;
  width: 60%;
  height: 70vh;
}
.see-right {
  box-sizing: border-box;
  top: 0;
  right: 0;
  position: absolute;
  width: 58%;
  height: 70vh;
  z-index: 999;
  overflow: hidden;
}
.box-right {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(77%, -50%);
  width: 220%;
  height: 70vh;
  padding: 5px 20px;
  transition: all 0.6s ease;
}
.box-right.next {
  transform: translate(25%, -50%);
  transition: all 0.6s ease;
}
.box-card_right {
  box-sizing: border-box;
  width: 100%;
  height: 70vh;
  border: 0;
}

.left_side {
  position: relative;
  float: left;
  width: 45%;
  height: 63vh;
  text-align: left;
}
.right_side {
  box-sizing: border-box;
  position: relative;
  float: right;
  width: 50%;
  height: 63vh;
  padding: 0 50px;
  text-align: left;
}
.box-card_right_title {
  color: #225cc2;
  font-size: 1.5rem;
}
.box-card_right_title_detail {
  margin-top: 5px;
  color: #909399;
  font-size: 1.1rem;
}
.big-radius {
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
}
.box-card_radius {
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transition: all 0.8s ease;
}
.box-card_radius.choose {
  transform: rotate(180deg);
  transition: all 0.8s ease;
}
.box-card_right_pic {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 340px;
  height: 170px;
  border-radius: 0 0 170px 170px;
  overflow: hidden;
  background-color: #fff;
  text-align: center;
  z-index: 999;
}
.box-card_radius_top {
  margin: 30px auto;
  width: 300px;
  height: 150px;
  border-radius: 150px 150px 0 0;
  overflow: hidden;
}
.box-card_radius_top img {
  width: 300px;
  height: 150px;
  border-radius: 150px 150px 0 0;
}
.box-card_radius_bottom {
  margin: -30px auto;
  width: 300px;
  height: 150px;
  border-radius: 150px 150px 0 0;
  transform: rotate(180deg);
  overflow: hidden;
}
.box-card_radius_bottom img {
  width: 300px;
  height: 150px;
  border-radius: 150px 150px 0 0;
}
</style>